<template>
  <div class="container">
    <div class="container-top">
      <div class="top-name">用户管理</div>
    </div>
    <div class="input_modal">
      <div class="modal-list">
        <div class="input-item">
          <span class="name">User ID：</span>
          <el-input
            v-model="id"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
        <div class="input-item">
          <span class="name">昵称：</span>
          <el-input
            v-model="nickNameLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
      </div>
     <div class="modal-list last">
        <div class="input-item">
          <span class="name">手机号：</span>
          <el-input
            v-model="mobileLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
        <div class="input-item">
          <span class="name">最后交易时间：</span>
          <el-date-picker
              v-model="dateArr"
              type="daterange"
              style="width:260px"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
        </div>
     </div>
      <div class="btns-top">
          <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="getList"
        >查询</el-button>
        <el-button
          size="mini"
          icon="el-icon-refresh"
          @click="refresh"
        >重置</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table
        :data="tableData"
        stripe
        v-loading="loading"
      >
        <el-table-column
          prop="id"
          label="User Id"
        ></el-table-column>
        <el-table-column
          prop="weight"
          label="头像"
        >
          <template slot-scope="scope">
            <img
              style="width:50px;height:50px;border-radius:50%"
              :src="scope.row.avatarUrl"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="昵称"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
        ></el-table-column>
        <el-table-column
          prop="gmtCreated"
          label="注册时间"
        ></el-table-column>
        <!-- <el-table-column
          prop="weight"
          label="状态"
        >
          <template slot-scope="scope">
            {{scope.row.isFrozen == 'y'?'已禁用':'已启用'}}
          </template>
        </el-table-column> -->
        <el-table-column
          prop=""
          label="操作"
        >
          <template slot-scope="scope">
            <!--<el-button type="primary" size="mini" @click="changeStatus(scope.row.id,scope.row.isSale)">{{scope.row.isSale=='y'?'下架':'上架'}}</el-button>-->
            <!--<el-button type="primary" size="mini" @click="editItem(scope.row.id,'check')">查看</el-button>-->
            <el-button
              type="primary"
              size="mini"
              @click="$router.push('/userDetail?id='+scope.row.id)"
            >查看</el-button>
            <!-- <el-button
              type="primary"
              size="mini"
              @click="handleForbid(scope.row.id,scope.row.isFrozen)"
            >{{scope.row.isFrozen == 'y'?'启用':'禁用'}}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      base: "",
      nameLike: "",
      isSale: "",
      statusList: [
        { label: "全部", value: "" },
        { label: "上架", value: "y" },
        { label: "下架", value: "n" }
      ],
      tableData: [],
      nickNameLike: "",
      mobileLike: "",
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      id: "",
      name: "",
      dateArr:[]
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
  },
  methods: {
    refresh(){
      this.pageIndex = 1
      this.id = ''
      this.nickNameLike = ''
      this.mobileLike = ''
      this.dateArr = []
      this.getList()
    },
    getList: function() {
      let date, date1;
      if (this.dateArr&&this.dateArr.length) {
        [date, date1] = this.dateArr;
      }
      let url = CONSTANT.URL.LIST.USERLIST;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        id:this.id,
        nickNameLike: this.nickNameLike,
        mobileLike: this.mobileLike,
        gmtCreatedGE:date,
        gmtCreatedLE:date1
      };
      this.loading = true;
      common.post(url, data, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.pageCount = data.pageCount * this.pageSize;
      });
    },
    deleteItem(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.LIST.DELETEGOOD;
          common.requestAjax(url, null, { id: id }, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleForbid(id, state) {
      this.$confirm(`是否${state == "y" ? "启用用户" : "禁用用户"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url =
            state == "y"
              ? CONSTANT.URL.LIST.UNFROZEN
              : CONSTANT.URL.LIST.FROZEN;
          common.get(url, id, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.errMsg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    addItem() {
      this.$router.push("/productEdit");
    },
    editItem(id, type) {
      if (id == 1) {
        this.$router.push({
          name: "homeAdModal",
          query: { id: id, type: type, pageIndex: this.pageIndex }
        });
      } else if (id == 2) {
        this.$router.push({
          name: "homeBanner",
          query: { id: id, type: type, pageIndex: this.pageIndex }
        });
      } else if (id == 3) {
        this.$router.push({
          name: "homeFuncMenu",
          query: { id: id, type: type, pageIndex: this.pageIndex }
        });
      }
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    },
    searchCity() {}
  },
  filters: {
    formatStatus(value) {
      var list = [];
      list["y"] = "上架";
      list["n"] = "下架";
      if (value) {
        return list[value];
      } else {
        return "--";
      }
    }
  }
};
</script>
